<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<div id="app">
    <ul>
        <c-item v-for="item in cItem" v-bind:time="item"></c-item>
    </ul>
</div>

<script>
    <!--全局组件没有s-->
    Vue.component("c-item",
        {
            props: ["time"],
            template:"<li>{{time}}</li>"
        }
    );

    var v = new Vue({
        el:"#app",
        data:{
            //父组件的值，最终传到子组件tao之中去。当子组件在另一个文件定义时，是有用的。但实际上生成的html
            // 最后是在同一个文件之中的。看起来像是进行了组件之间的通讯。嗯。只是个传值

            cItem:["19:20","21:20","20:20","23:20"]
        }

    })
</script>
</body>
</html>